<template>
    <div class="concentration_conter ">
        <h3 style="font-size: 18px;">为你推荐</h3>
        <ul class="concentration_box">
            <li class="concentration_item">
                <img class="big_img"
                    src="https://yanxuan-item.nosdn.127.net/f92d5491b32a6f762c903028c89a3d5c.png?type=webp&imageView&quality=65&thumbnail=330x330"
                    alt="">
                <div class=" concentration_title"><img class=" sml_img"
                        src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" alt=""><span
                        class="title">吸水快，包裹强，2毫米豆腐细砂</span></div>
                <div class="concentration_price">
                    <span class="currentprice">¥ 26.9</span>
                    <span class="originalcost">¥26.9</span>
                </div>
                <div class="bigbox">
                    <div class="smlbox">限时购</div>距结束1天
                </div>
            </li>
            <li class="concentration_item">
                <img class="big_img"
                    src="https://yanxuan-item.nosdn.127.net/f92d5491b32a6f762c903028c89a3d5c.png?type=webp&imageView&quality=65&thumbnail=330x330"
                    alt="">
                <div class=" concentration_title"><img class=" sml_img"
                        src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" alt=""><span
                        class="title">吸水快，包裹强，2毫米豆腐细砂</span></div>
                <div class="concentration_price">
                    <span class="currentprice">¥ 26.9</span>
                    <span class="originalcost">¥26.9</span>
                </div>
                <div class="bigbox">
                    <div class="smlbox">限时购</div>距结束1天
                </div>
            </li>
            <li class="concentration_item">
                <img class="big_img"
                    src="https://yanxuan-item.nosdn.127.net/f92d5491b32a6f762c903028c89a3d5c.png?type=webp&imageView&quality=65&thumbnail=330x330"
                    alt="">
                <div class=" concentration_title"><img class=" sml_img"
                        src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" alt=""><span
                        class="title">吸水快，包裹强，2毫米豆腐细砂</span></div>
                <div class="concentration_price">
                    <span class="currentprice">¥ 26.9</span>
                    <span class="originalcost">¥26.9</span>
                </div>
                <div class="bigbox">
                    <div class="smlbox">限时购</div>距结束1天
                </div>
            </li>
            <li class="concentration_item">
                <img class="big_img"
                    src="https://yanxuan-item.nosdn.127.net/f92d5491b32a6f762c903028c89a3d5c.png?type=webp&imageView&quality=65&thumbnail=330x330"
                    alt="">
                <div class=" concentration_title"><img class=" sml_img"
                        src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" alt=""><span
                        class="title">吸水快，包裹强，2毫米豆腐细砂</span></div>
                <div class="concentration_price">
                    <span class="currentprice">¥ 26.9</span>
                    <span class="originalcost">¥26.9</span>
                </div>
                <div class="bigbox">
                    <div class="smlbox">限时购</div>距结束1天
                </div>
            </li>
            <li class="concentration_item">
                <img class="big_img"
                    src="https://yanxuan-item.nosdn.127.net/f92d5491b32a6f762c903028c89a3d5c.png?type=webp&imageView&quality=65&thumbnail=330x330"
                    alt="">
                <div class=" concentration_title"><img class=" sml_img"
                        src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" alt=""><span
                        class="title">吸水快，包裹强，2毫米豆腐细砂</span></div>
                <div class="concentration_price">
                    <span class="currentprice">¥ 26.9</span>
                    <span class="originalcost">¥26.9</span>
                </div>
                <div class="bigbox">
                    <div class="smlbox">限时购</div>距结束1天
                </div>
            </li>
            <li class="concentration_item">
                <img class="big_img"
                    src="https://yanxuan-item.nosdn.127.net/f92d5491b32a6f762c903028c89a3d5c.png?type=webp&imageView&quality=65&thumbnail=330x330"
                    alt="">
                <div class=" concentration_title"><img class=" sml_img"
                        src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" alt=""><span
                        class="title">吸水快，包裹强，2毫米豆腐细砂</span></div>
                <div class="concentration_price">
                    <span class="currentprice">¥ 26.9</span>
                    <span class="originalcost">¥26.9</span>
                </div>
                <div class="bigbox">
                    <div class="smlbox">限时购</div>距结束1天
                </div>
            </li>
            <li class="concentration_item">
                <img class="big_img"
                    src="https://yanxuan-item.nosdn.127.net/f92d5491b32a6f762c903028c89a3d5c.png?type=webp&imageView&quality=65&thumbnail=330x330"
                    alt="">
                <div class=" concentration_title"><img class=" sml_img"
                        src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" alt=""><span
                        class="title">吸水快，包裹强，2毫米豆腐细砂</span></div>
                <div class="concentration_price">
                    <span class="currentprice">¥ 26.9</span>
                    <span class="originalcost">¥26.9</span>
                </div>
                <div class="bigbox">
                    <div class="smlbox">限时购</div>距结束1天
                </div>
            </li>
        </ul>
    </div>
</template>

<script  setup lang='ts'>
</script>

<style scoped lang="less">
.concentration_conter {
    padding: 0 10px;

    h3 {
        font-size: 26px;
    }

    .concentration_box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .concentration_item {
            width: 172.5px;
            height: 302.5px;

            .big_img {
                width: 100%;
            }

            // width: 331px;
            .concentration_title {

                margin-top: 0.12rem;
                line-height: .4rem;
                text-align: left;
                font-size: .28rem;
                font-weight: 500;
                text-overflow: ellipsis;
                overflow: hidden;
                color: #12161c;
                font-family: PingFangSC-Regular;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                word-break: break-all;

                .sml_img {

                    margin-right: 0.1rem;
                    vertical-align: -3PX;
                    height: 15px;
                }


            }

            .concentration_price {
                height: 30px;

                .currentprice {
                    font-size: 16px;
                    color: red;
                    margin-right: 10px;
                }

                .originalcost {
                    font-size: 12px;
                    text-decoration: line-through;
                    color: #999b9d;
                }
            }

            .bigbox {
                width: 100%;
                height: 23px;
                display: flex;
                background: #ffe9eb;
                font-size: 12px;
                line-height: 23px;
                border-radius: 10px;
                color: red;
                font-weight: bold;
                margin-top: 10px;

                .smlbox {
                    background: red;
                    border-radius: 10px;
                    margin-right: 10px;
                    color: #eee;
                    font-weight: bold;
                    padding: 0 5px;
                }
            }
        }
    }


}
</style>